<div id="video-recorder-area">
	<form name="ajax_form" id="ajax_form" action="<?php echo base_url(); ?>company/video/insert" method="post" enctype="multipart/form-data" target="video_iframe">
		<div id="recorderContainer" style="float: left; height:300px; width: 320px; margin-right:8px;">
			<h3><?php echo $this->lang->line('video_recordvideo'); ?></h3>
		</div>
		<div id="playerContainer" style="float: left; height:300px; width: 320px; display: none;">
			<h3><?php echo $this->lang->line('video_reviewvideo'); ?></h3>
		</div>
		<div id="actionsContainer" class="both" style="display: none;">
			<center>
				<label for="btnEnter"><input type="submit" id="btnEnter" class="submit" value="<?php echo $this->lang->line('video_send'); ?>" /></label>
				<?php echo $this->lang->line('video_or'); ?> <a onclick="newVideoRecord();"><?php echo $this->lang->line('video_recordagain'); ?></a>
			</center>
		</div>
		<input type="hidden" name="link" id="link" value="" />
		<input type="hidden" name="idopentok" id="idopentok" value="Y" />
		<input type="hidden" name="image" id="image" value="" />
	</form>
<iframe id="video_iframe" name="video_iframe" class="hide"></iframe>
</div>
<script src="http://staging.tokbox.com/v0.91/js/TB.min.js" type="text/javascript" charset="utf-8"></script>
<script>
	var recorderManager;
	var recorder;
	var player;
	var recImgData;

	var API_KEY = '14702921';  // OpenTok sample code key. Replace with your own API key.
	var TOKEN = 'moderator_token';
	
	var VIDEO_HEIGHT = 240;
	var VIDEO_WIDTH = 320;
	
	// Un-comment either of the following to set automatic logging and exception handling.
	// See the exceptionHandler() method below.
	// TB.setLogLevel(TB.DEBUG);
	// TB.addEventListener('exception', exceptionHandler);

	function init() {
		recorderManager = TB.initRecorderManager(API_KEY);
		createRecorder();
	}

	function createRecorder() {
		var recDiv = document.createElement('div');
		recDiv.setAttribute('id', 'recorderElement');
		document.getElementById('recorderContainer').appendChild(recDiv);
		recorder = recorderManager.displayRecorder(TOKEN, recDiv.id);
		recorder.addEventListener('recordingStarted', recStartedHandler);
		recorder.addEventListener('archiveSaved', archiveSavedHandler);
	}

	function getImg(imgData) {
		var img = document.createElement('img');
		img.setAttribute('src', 'data:image/png;base64,' + imgData);
		return img;
	}

	function loadArchiveInPlayer(archiveId) {
		if (!player) {
			playerDiv = document.createElement('div');
			playerDiv.setAttribute('id', 'playerElement');
			document.getElementById('playerContainer').appendChild(playerDiv);
			player = recorderManager.displayPlayer(archiveId, TOKEN, playerDiv.id);
			document.getElementById('playerContainer').style.display = 'block';
		} else {
			player.loadArchive(archiveId);
		}
	}

	//--------------------------------------
	//  OPENTOK EVENT HANDLERS
	//--------------------------------------

	function recStartedHandler(event) {
		$('#image').val(recorder.getImgData());
	}
	
	function archiveSavedHandler(event) {
		$('#recorderContainer').hide();
		$('#playerContainer').show();
		$('#actionsContainer').show();
		loadArchiveInPlayer(event.archives[0].archiveId);
		$('#link').val(event.archives[0].archiveId);
	}

	function archiveLoadedHandler(event) {
		archive = event.archives[0];
		archive.startPlayback();
	}

	function newVideoRecord() {
		player = null;
		$('#recorderContainer').html('<h3><?php echo $this->lang->line('video_recordvideo'); ?></h3>');
		$('#playerContainer').html('<h3><?php echo $this->lang->line('video_reviewvideo'); ?></h3>');
		$('#playerContainer').hide();
		$('#actionsContainer').hide();
		init();
		$('#recorderContainer').show();
	}

	/*
	If you un-comment the call to TB.addEventListener('exception', exceptionHandler) above, OpenTok calls the
	exceptionHandler() method when exception events occur. You can modify this method to further process exception events.
	If you un-comment the call to TB.setLogLevel(), above, OpenTok automatically displays exception event messages.
	*/
	function exceptionHandler(event) {
		alert('Exception: ' + event.code + '::' + event.message);
	}

	setTimeout('init();', 3000);
</script>